<template>
  <div>
    <div class="topBtn">
      <div class="sizeBig">
        <span>包装发货</span>
      </div>
      <div class="liucheng">
        <el-steps :active="5" align-center>
          <el-step title="生产开工"></el-step>
          <el-step title="打印输出"></el-step>
          <el-step title="输出分拣"></el-step>
          <el-step title="产品分拣"></el-step>
          <el-step title="包装发货"></el-step>
        </el-steps>
      </div>
      <!-- <div class="btn">
        <el-button type="primary" @click="close">
          <i class="icon-close"></i>关箱
        </el-button>
        <el-button type="primary" @click="open">
          <i class="icon-open"></i>开箱
        </el-button>
        <el-button type="primary" @click="remove">
          <i class="icon-move"></i>SN移除
        </el-button>
        <el-button type="primary" @click="add" icon="el-icon-circle-plus-outline">SN添加
        </el-button>
      </div>-->
    </div>
    <div class="message">
      <p class="character">
        扫描一叠产品的第一个SN，系统会带出该SN的订单号及推荐纸箱型号、数量。操作员可以按系统推荐的纸箱拿取包装箱，也可以根据实际需要拿其它纸箱，系统会以扫描的纸箱型号为主。
        <span
          class="skip"
        >查看帮助文档</span>
      </p>
    </div>

    <div class="main" v-loading="loading">
      <div class="main_left">
        <div class="operation">
          <h4>操作区</h4>
          <ul>
            <el-radio-group v-model="radio" class="anniu">
              <el-radio label="0">订单扫描</el-radio>
              <el-radio label="1">产品扫描</el-radio>
            </el-radio-group>

            <!-- 订单扫描 -->
            <template v-if="radio=='0'">
              <li class="last">
                <span>上一道工序:</span>
                <el-button class="dayin" style="background-color:#eee;width:70px;">
                  <!-- <span>{{productData.PreTechName}}</span> -->
                  <span style="color:#000;marginLeft:-13px;">产品分拣</span>
                </el-button>
              </li>
              <li class="saomiao">
                <span v-if="codeArr == 1">扫描包装箱号:</span>
                <span v-else>扫描订单条码:</span>

                <el-input
                  v-model="saomiao"
                  placeholder="请扫描条码"
                  style="width:60%"
                  @keydown.native.enter="getProduct1"
                  clearable
                ></el-input>
              </li>
              <li class="package">
                <span>包裹数:</span>
                <el-input
                  v-model="packag"
                  placeholder="包裹数"
                  style="width:80px"
                  @keydown.native.enter="getPackag1"
                  ref="input"
                  clearable
                ></el-input>
              </li>
            </template>

            <!-- 产品扫描 -->
            <template v-else>
              <li class="last">
                <span>上一道工序:</span>
                <el-button class="dayin" style="background-color:#eee;width:70px;">
                  <!-- <span>{{productData.PreTechName}}</span> -->
                  <span style="color:#000;marginLeft:-13px;">产品分拣</span>
                </el-button>
              </li>
              <li class="saomiao">
                <span v-if="codeArr == 1">扫描包装箱号:</span>
                <span v-else>扫描产品条码:</span>
                <el-input
                  v-model="saomiao"
                  placeholder="请扫描条码"
                  style="width:60%"
                  @keydown.native.enter="getProduct2"
                  clearable
                ></el-input>
              </li>
              <li class="package">
                <span>包裹数:</span>
                <el-input
                  v-model="packag"
                  placeholder="包裹数"
                  style="width:80px"
                  @keydown.native.enter="getPackag2"
                  ref="input"
                  clearable
                ></el-input>
              </li>
            </template>
          </ul>
        </div>
        <div class="workstation">
          <div>
            <h4>工位信息展示</h4>
            <el-select v-model="lineId" placeholder="请选择线体" @change="getStation">
              <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item.LineId + '  ' + item.Name"
                :value="item.LineId"
              ></el-option>
            </el-select>
          </div>
          <ul>
            <li>
              <div>
                <li>
                  <h5>工位名称：</h5>
                  <span>{{workStationData.Name}}</span>
                </li>
                <li>
                  <h5>工位线体：</h5>
                  <span>{{workStationData.LineName}}</span>
                </li>
                <li>
                  <h5>所属车间：</h5>
                  <span>{{workStationData.WorkShopName}}</span>
                </li>
                <li>
                  <h5>操作员：</h5>
                  <span>{{workStationData.LastModifyBy}}</span>
                </li>
              </div>
            </li>
            <li>
              <div>
                <li>
                  <h5>订单号：</h5>
                  <span v-if="radio == '0'">{{codeArr[0]}}</span>
                  <span v-else>{{productData.NetOrderId}}</span>
                </li>
                <li>
                  <h5>大板数量：</h5>
                  <span></span>
                </li>
                <li>
                  <h5>客户名称：</h5>
                  <!-- <span>{{productData.CtmName}}</span> -->
                  <span v-if="radio == '0'">{{orderData.CtmName}}</span>
                  <span v-else>{{productData.Name}}</span>
                </li>
              </div>
            </li>
            <li class="big">
              <div>
                <li>
                  <h5>包装箱号：</h5>
                  <span>{{boxData.BoxCode}}</span>
                </li>
                <li>
                  <h5 class="else">推荐纸箱型号：</h5>
                  <span></span>
                </li>
                <li>
                  <h5 class="else">包装箱最大数：</h5>
                  <span></span>
                </li>
              </div>
            </li>
          </ul>
        </div>

        <!-- 快递单信息 -->
        <div class="expressMessage">
          <h4>快递单信息</h4>
          <el-input v-model="productInput" placeholder="请扫描" @keydown.native.enter="getKuaiDiMes" clearable ref="autoFocus"></el-input>
          <el-button type="primary" @click="printAll" style="margin:9px 0 0 20px;">打印全部</el-button>
          <div class="messageExp">
            <ul v-for="(item,index) in shippingData" :key="index">
              <li><h5>收件地址：</h5><span>{{item.RecCity+item.RecCitypart+item.RecCompany}}</span></li>
              <li><h5>收 件 人：</h5><span>{{item.RecName}}</span></li>
              <li><h5>收件人联系方式:</h5><span>{{item.RecMobile}}</span></li>
              <li><h5>快递单号:</h5><span style="color:#0095FF;cursor:pointer;" @click="CreateOneFormPage($event)">{{item.ShippingNo}}</span></li>
            </ul>
          </div>
        </div>

        <div class="product">
          <h4>产品SN明细展示</h4>
          <div class="table">
            <Table :tableData="tableData"></Table>
          </div>
        </div>
      </div>
      <div class="main_right">
        <h4>ESOP-标准作业指导书</h4>
        <ul>
          <li>
            <div>
              <img src="./image/图一.png" alt />
            </div>
          </li>
          <li class="else">
            <div>
              <img src="./image/图二.png" alt />
            </div>
          </li>
          <li class="else">
            <div>
              <img src="./image/图三.png" alt />
            </div>
          </li>
          <li class="else">
            <div>
              <img src="./image/图四.png" alt />
            </div>
          </li>
          <li class="else">
            <div>
              <img src="./image/图五.png" alt />
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- pdf弹框 -->
    <el-dialog :visible.sync="pdfDialogVisible" width="600px">
      <div class="printTest">
        <pdf ref="pdf" :src="pdfUrl"></pdf>
      </div>
      <el-button type="primary" @click="print">打印</el-button>
    </el-dialog>

  </div>
</template>

<script>
import {getLodop} from './assets/LodopFuncs'
import {
  getWorkStationInfo //获取工位信息
} from "@/api/scan";
import { getUserLineList } from "@/api/linebody";
import {
  getScanBoxProductStart, //第一：产品扫描
  scanBoxMaterial, //第二：箱子物料扫描
  getScanBoxProductEnd, //第三：产品扫描
  commitScanBoxProduct, //第四：订单产品提交
  getScanBoxOrderBag, //订单扫描
  openOrCloseBox, //开/关箱
  addOrRemoveBoxProduct, //添加/移除产品
  getShippingOrderList, //获取快递单信息
  getOrderShippExport //获取快递单
} from "@/api/shipments";
import pdf from "vue-pdf";
import Table from "./components/shipmentsTable";
import {UrlPrint} from "@/module/url"
export default {
  name: "shipments",
  components: {
    Table,
    pdf
  },
  data() {
    return {
      productInput:'',
      packag: "",
      saomiao: "",
      workStationData: [], //工位信息数据
      orderData: [], //订单产品信息
      lineId: "",
      loading:false,
      // option:{
      //   text:'加载中',
      //   background:'transparent',
      // },
      options: [],
      radio: "0",
      shippingData:[],
      codeArr: [],
      boxData: [],
      tableData: [], //产品SN明细数据
      productData: [], //
      pdfDialogVisible: false,
      pdfUrl: "",
      shippingNo: "",
      printer:'',
    };
  },
  mounted(){
    this.getLine()
  },
  methods: {
    directives: {
      // 注册一个局部的自定义指令 v-focus
      focus: {
        // 指令的定义
        inserted: function (el) {
          // 聚焦元素
          el.querySelector('input').focus()
        }
      }
    },
    //打印所有快递单
    printAll(){
      if(this.shippingData){
        this.$message({
          message: '请输入快递单号',
          type: 'warning'
        })
      }
      this.shippingData.forEach((el)=>{
        console.log(el.ShippingNo)
          this.CreateOneFormPages(el.ShippingNo)
      })
    },
    // 多张打印
    CreateOneFormPages(e) {
      LODOP = getLodop();
      // LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_按ID摘取内容输出");
      LODOP.SET_PRINT_PAGESIZE(1,'100mm','130mm');
      LODOP.ADD_PRINT_PDF(0,0,"100%","100%","http://192.168.1.135:80/api/Doing/GetOrderShippExport?shippingNo="+e);
      //
      // LODOP.ADD_PRINT_URL(10,10,600,600,"http://192.168.1.135/api/Doing/GetOrderShippExport?shippingNo=235208841292");
      // LODOP.SET_PRINT_STYLEA(0,"IDTagForPick",strID_Tag);
      LODOP.SET_PRINTER_INDEX(this.printer);
      LODOP.PRINT();
    },
    // pdf单打印快递单
    CreateOneFormPage(e) {
      this.shippingNo = e.target.innerText
      console.log(this.shippingNo)
      LODOP = getLodop();
      // LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_按ID摘取内容输出");
      LODOP.SET_PRINT_PAGESIZE(1,'100mm','130mm');
      LODOP.ADD_PRINT_PDF(0,0,"100%","100%","http://192.168.1.135:80/api/Doing/GetOrderShippExport?shippingNo="+this.shippingNo);
      //
      // LODOP.ADD_PRINT_URL(10,10,600,600,"http://192.168.1.135/api/Doing/GetOrderShippExport?shippingNo=235208841292");
      // LODOP.SET_PRINT_STYLEA(0,"IDTagForPick",strID_Tag);
      LODOP.SET_PRINTER_INDEX(this.printer);
      LODOP.PRINT();
    },
    handleCurrentChange() {},
    getStation() {
      //获取本机电脑IP地址
      var RTCPeerConnection =
        window.RTCPeerConnection ||
        window.webkitRTCPeerConnection ||
        window.mozRTCPeerConnection;
      if (RTCPeerConnection)
        (() => {
          var rtc = new RTCPeerConnection();
          rtc.createDataChannel(""); //创建一个可以发送任意数据的数据通道
          rtc.createOffer(
            offerDesc => {
              //创建并存储一条sdp数据
              rtc.setLocalDescription(offerDesc);
            },
            e => {}
          );
          rtc.onicecandidate = evt => {
            //监听candidate事件
            // console.log(evt)
            if (evt.candidate && evt.candidate.foundation == 25531464) {
              var ip_addr = evt.candidate.address;
              // console.log(this.ip_addr)
              localStorage.setItem("ip_addr", ip_addr);
            }
          };
        })();
      var ipaddress = localStorage.getItem("ip_addr");
      console.log(ipaddress);
      //通过电脑IP地址获取当前工位信息
      getWorkStationInfo({
        ipAddress: ipaddress,
        techType: 9,
        lineId: parseInt(this.lineId)
      })
        .then(res => {
          if (parseInt(res.Code) === 1) {
            this.workStationData = res.Result;
            this.printer = res.Result.PrinterName
          }
        })
        .catch(res => {});
    },
    //获取线体
    getLine() {
      getUserLineList({ keyName: "", lineType:-1 }).then(res => {
        if (parseInt(res.Code) === 1) {
          this.options = res.Result;
        }
      });
    },
    getKuaiDiMes(){
      if(this.productInput==''){
        this.$message('请扫描条码')
      }else{
        this.shippingData = []
        getShippingOrderList({netOrderId:this.productInput}).then(res => {
          if(parseInt(res.Code) === 1){
            this.$message({
                type:"success",
                message:res.Message
              })
            this.shippingData = res.Result
            console.log(this.shippingData)
          }
          this.productInput=''
        }).catch(res=>{
          this.productInput=''
        })
      }
    },
    // getPDF(e){
    //   console.log(e.target.innerText)
    //   this.shippingNo = e.target.innerText
    //   this.pdfDialogVisible = true
    //   // this.pdfUrl = "UrlPrint/api/Doing/GetOrderShippExport?shippingNo="+this.shippingNo
    //   this.pdfUrl = "http://192.168.1.135:80/api/Doing/GetOrderShippExport?shippingNo="+this.shippingNo
    //   //传给打印机
    // },
    // 打印
    print(){
      // var newstr = document.getElementsByClassName('printTest')[0].innerHTML
      // document.body.innerHTML = newstr
      // window.print()
      // // 重新加载页面，以刷新数据
      // window.location.reload()
      this._print()
    },
    _print() {
      const routeData = this.$router.resolve({
        path: '/printPDF',
        query: {
          pdfUrl: this.pdfUrl,

        }
      })
      window.open(routeData.href, '_blank')
    },
    //订单提交
    getPackag1(){
      if(this.codeArr.length >= 2){
        if (!this.packag) {
          commitScanBoxProduct({flag:0,boxId:this.boxData.BoxID,netOrderId:this.codeArr[0],quantity:1}).then(res => {
            if(parseInt(res.Code) === 1){
              this.$message({
                type:"success",
                message:res.Message
              })
              this.loading = true
              this.shippingData = []
              setTimeout(()=>{
                getShippingOrderList({netOrderId:this.codeArr[0]}).then(res => {
                  if(parseInt(res.Code) === 1){
                    this.shippingData = res.Result
                    this.codeArr = []
                    this.packag = ''
                    this.loading = false
                  }
                }).catch(res=>{
                  this.codeArr = []
                  this.loading = false
                })
              },3000)
            }
          })
        } else {
          commitScanBoxProduct({flag:0,boxId:this.boxData.BoxID,netOrderId:this.codeArr[0],quantity:parseInt(this.packag)}).then(res => {
            if(parseInt(res.Code) === 1){
              this.$message({
                type:"success",
                message:res.Message
              })
              this.packag = ''
              this.shippingData = []
              this.loading = true
              setTimeout(()=>{
                getShippingOrderList({netOrderId:this.codeArr[0]}).then(res => {
                  if(parseInt(res.Code) === 1){
                    this.shippingData = res.Result
                    this.codeArr = []
                    this.loading = false
                  }
                }).catch(res=>{
                  this.codeArr = []
                  this.loading = false
                })
              },3000)
            }
          })
        }
      }
    },
    // 产品提交
    getPackag2(){
      this.$nextTick(()=>{
        this.$refs.autoFocus.focus()
      })
      if(this.codeArr.length >= 2){
        if (!this.packag) {
          commitScanBoxProduct({
            flag: 1,
            boxId: this.boxData.BoxID,
            quantity: 1,
            productCodeStart: this.codeArr[0],
            productCodeEnd: this.codeArr[0]
          }).then(res => {
            if (parseInt(res.Code) === 1) {
              this.$message({
                type:"success",
                message:res.Message
              })
              this.loading = true
              this.shippingData = []
              setTimeout(()=>{
                getShippingOrderList({netOrderId:this.codeArr[0]}).then(res => {
                  if(parseInt(res.Code) === 1){
                    this.shippingData = res.Result
                    this.codeArr = []
                    this.loading = false
                  }
                }).catch(res=>{
                  this.codeArr = []
                  this.loading = false
                })
              },3000)
            }
          });
        } else {
          commitScanBoxProduct({
            flag: 1,
            boxId: this.boxData.BoxID,
            quantity: parseInt(this.packag),
            productCodeStart: this.codeArr[0],
            productCodeEnd: this.codeArr[0]
          })
          .then(res => {
              if (parseInt(res.Code) === 1) {
                this.$message({
                  type:"success",
                  message:res.Message
                })
                this.packag = ''
                this.shippingData = []
                this.loading = true
                setTimeout(()=>{
                  getShippingOrderList({netOrderId:this.codeArr[0]}).then(res => {
                    if(parseInt(res.Code) === 1){
                      this.shippingData = res.Result
                      this.codeArr = []
                      this.loading = false
                    }
                  }).catch(res=>{
                    this.codeArr = []
                    this.loading = false
                  })
                },3000)
              }
            })
          .catch(res => {});
        }
      }
    },
    //订单扫描
    getProduct1() {

      if(this.lineId == ''){
        this.$message('请选择线体')
        this.saomiao = ''
        return
      }else{
        if (!this.saomiao) {
          this.$message("订单条码不能为空");
        } else {
          this.codeArr.push(this.saomiao);
          console.log(this.codeArr);
          if (this.codeArr.length === 1) {
            // 订单条码扫描
            getScanBoxOrderBag({
              techId: this.workStationData.TechId,
              netOrderId: this.codeArr[0]
            }).then(res => {
              if (parseInt(res.Code) === 1) {
                this.tableData = res.Result;
                res.Result.forEach(el => {
                  this.orderData = el;
                });
                this.$message("请扫描包装箱编号");
              }
            }).catch(res => {
              this.codeArr.pop()

            });
            this.saomiao = "";

          } else if (this.codeArr.length === 2) {
            scanBoxMaterial({ materialCode: this.codeArr[1] }).then(res => {

              if (parseInt(res.Code) === 1) {
                this.boxData = res.Result;
                // 订单提交
                this.$message("请输入包裹数");
                this.saomiao = "";
                this.$refs.input.focus()
              }
            }).catch(res => {
              this.codeArr.pop()
            });
          } else {

            return;
          }
        }
      }
    },
    //产品扫描
    getProduct2() {
      if(this.lineId == ''){
        this.$message('请选择线体')
        this.saomiao = ''
        return
      }else{
        if (!this.saomiao) {
          this.$message("产品条码不能为空");
        } else {
          this.codeArr.push(this.saomiao);
          console.log(this.codeArr)
          if (this.codeArr.length === 1) {
            this.tableData = []
            getScanBoxProductStart({
              techId: this.workStationData.TechId,
              productCode: this.codeArr[0]
            })
              .then(res => {
                if (parseInt(res.Code) === 1) {
                  this.tableData.push(res.Result)
                  this.productData = res.Result.OrderBag;
                  // this.netOrderId = res.Result.OrderbagId;
                }
                this.$message("请扫描包装箱编号");
              })
              .catch(res => {
                this.codeArr.pop()
              });
            this.saomiao = "";

          } else if (this.codeArr.length === 2) {
            scanBoxMaterial({ materialCode: this.codeArr[1] })
              .then(res => {
                if (parseInt(res.Code) === 1) {
                  this.boxData = res.Result;
                }
              })
              .catch(res => {
                this.codeArr.pop()
              });
            this.saomiao = "";
            this.$message("请输入包裹数");
            this.$refs.input.focus()
          }
          // else if (this.codeArr.length === 3) {
          //   getScanBoxProductEnd({
          //     techId: this.workStationData.TechId,
          //     productCodeStart: this.codeArr[0],
          //     productCodeEnd: this.codeArr[2]
          //   })
          //     .then(res => {
          //       if (parseInt(res.Code) === 1) {
          //         this.tableData = res.Result;
          //         // 产品提交
          //         this.$message("请输入包裹数");
          //         this.saomiao = "";
          //         this.$refs.input.focus()
          //       }
          //     })
          //     .catch(res => {
          //       this.codeArr.pop()
          //     });
          // }
          else {

            return;
          }
        }
      }
    },
    //关箱
    close() {
      openOrCloseBox({ boxId: this.boxData.BoxID, boxStatus: 1 }).then(res => {
        if (parseInt(res.Code) === 1) {
          this.$message({
            type: "success",
            message: "关箱成功"
          });
        }
      });
    },
    // 开箱
    open() {
      openOrCloseBox({ boxId: this.boxData.BoxID, boxStatus: 0 }).then(res => {
        if (parseInt(res.Code) === 1) {
          this.$message({
            type: "success",
            message: "开箱成功"
          });
        }
      });
    },
    // 移除
    remove() {
      addOrRemoveBoxProduct({
        boxId: this.boxData.BoxID,
        flag: 1,
        productCode: this.code
      }).then(res => {
        if (parseInt(res.Code) === 1) {
          this.$message({
            type: "success",
            message: "移除成功"
          });
        }
      });
    },
    // 添加
    add() {
      // this.$message('请扫描产品条码')
      // this.codeArr.push(this.saomiao)
      // if(this.codeArr.length === 1){
      //     this.$message('请扫描包装箱编号')
      // }else{
      addOrRemoveBoxProduct({
        boxId: this.boxData.BoxID,
        flag: 0,
        productCode: this.saomiao
      }).then(res => {
        if (parseInt(res.Code) === 1) {
          this.$message({
            type: "success",
            message: "添加成功"
          });
        }
      });
      // }
    }
  }
};
</script>

<style scoped lang="scss">
.topBtn {
  height: 60px;
  width: 98%;
  margin: 0 auto;
  line-height: 28px;
  display: flex;
  justify-content: space-between;
  .sizeBig {
    font-size: 16px;
    line-height: 60px;
  }
  .liucheng {
    width: 500px;
    line-height: 20px;
    margin-top: 6px;
  }
  .btn {
    line-height: 60px;

    .icon-close {
      display: inline-block;
      width: 24px;
      height: 12px;
      margin: 0 3px 2px 0;
      background: url("image/guanxiang.png") no-repeat;
      vertical-align: middle;
    }
    .icon-open {
      display: inline-block;
      width: 24px;
      height: 12px;
      margin: 0 3px 2px 0;
      background: url("image/kaixiang.png") no-repeat;
      vertical-align: middle;
    }
    .icon-move {
      display: inline-block;
      width: 24px;
      height: 12px;
      margin: 0 0 2px 0;
      background: url("image/SNyichu.png") no-repeat;
      vertical-align: middle;
    }
  }
}
.message {
  width: 98%;
  margin: 0 auto;
  height: 80px;
  line-height: 20px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  font-size: 14px;
  .character {
    margin: 20px 0 21px 20px;
    color: #999999;
    .skip {
      color: #0095ff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.main {
  width: 98%;
  height: 860px;
  margin: 0 auto;
  margin-top: 20px;
  .main_left {
    float: left;
    width: 60%;
    height: 100%;
    // background-color: #eee;
    .operation {
      height: 104px;
      border: 1px solid #eee;
      h4 {
        font-size: 14px;
        font-weight: 600;
        padding: 17px 0 0 22px;
        // margin: 17px 0 0 22px;
      }
      ul {
        display: flex;
        width: 95%;
        margin: 0 auto;
        height: 30px;
        line-height: 35px;
        .anniu {
          width: 12%;
          margin-top: 10px;
          .el-radio {
            margin-top: 5px;
          }
        }
        .last {
          width: 25%;
        }
        .saomiao {
          width: 39%;
        }
        .package {
          width: 23%;
        }
        li {
          float: left;
          // width:30%;
          height: 100%;
          line-height: 35px;
          // text-align: center;
          margin: 15px 0 0 20px;

          span {
            font-size: 14px;
          }
          .dayin {
            width: 90px;
            height: 35px;
            border: none;
            span {
              // float: left;
              width: 100%;
              color: #000;
            }
          }
        }
      }
    }
    .workstation {
      width: 100%;
      margin: 0 auto;
      height: 182px;
      margin-top: 20px;
      border: 1px solid #eee;
      div {
        h4 {
          float: left;
          font-size: 14px;
          font-weight: 600;
          padding: 17px 0 0 22px;
        }
        .el-select {
          margin-left: 20px;
          margin-top: 10px;
          width: 150px;
        }
      }
      ul {
        display: flex;
        width: 98%;
        margin: 0 auto;
        li {
          flex: 1;
          // margin-top: 10px;
          li {
            width: 100%;
            height: 20px;
            margin: 12px 0 0 20px;
            h5 {
              float: left;
              font-size: 14px;
              font-weight: 500;
              line-height: 20px;
              text-align-last: justify;
              width: 70px;
            }
            span {
              float: left;
              // width: 140px;
              line-height: 20px;
              font-size: 14px;
            }
            .else {
              width: 98px;
            }
          }
        }
        .big {
          flex: 1.5;
        }
      }
    }
    .expressMessage{
      width: 100%;
      margin-top: 20px;
      height: 200px;
      border: 1px solid #eee;
      h4{
        font-size: 14px;
        font-weight: 600;
        padding: 17px 0 0 22px;
        float: left;
      }
      .el-input{
        width: 150px;
        float: left;
        margin-left: 20px;
        margin-top: 10px;
      }
      .messageExp{
        width: 100%;
        height: 150px;
        overflow-x: hidden;
         ul{
          float: left;
          margin: 20px 10px 0 10px;
          li{
            height: 30px;
            h5{
              float: left;
              font-size: 14px;
              font-weight: 400;
            }
            span{
              float: left;
              font-size: 14px;
            }
          }
        }
      }
    }
    .product {
      margin-top: 20px;
      height: 263px;
      border: 1px solid #eee;
      h4 {
        font-size: 14px;
        font-weight: 600;
        padding: 17px 0 0 22px;
      }
      .table {
        width: 95%;
        margin: 0 auto;
        margin-top: 20px;
      }
    }
  }
  .main_right {
    float: right;
    width: 38.5%;
    height: 810px;
    border: 1px solid #eee;
    h4 {
      font-size: 14px;
      font-weight: 600;
      padding: 17px 0 0 22px;
      height: 53px;
    }
    ul {
      width: 80%;
      height: 750px;
      margin: 0 auto;
      overflow-x: hidden;
      li {
        width: 100%;
        // height: 400px;
        margin-bottom: 20px;
        // span {
        //   float: left;
        //   margin-left: 40px;
        //   font-size: 14px;
        // }
        div {
          //   float: left;
          //   margin-left: 21px;
          //   width: 80%;
          //   height: 100%;
          //   border: 1px solid #ccc;
          img {
            vertical-align: middle;
            // float: left;
          }
        }
      }
      .else {
        float: left;
        //   width: 45%;
        width: 209px;
        height: 144px;
        margin-right: 10px;
        img {
          //     vertical-align: middle;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
